<template>
  <div id="view-login">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      intro:
        "Join WeParty to release and participate in campus activities more conveniently! Join WeParty to release and participate in campus activities more conveniently!",
    };
  },
};
</script>

<style lang="less" scoped>
.center() {
  align-items: center;
  justify-content: center;
}

#view-login {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;

  .login-left {
    background: url("https://gushichen.gitee.io/img/post-bg-rwd.jpg") center
      center no-repeat;
    width: 30%;
    height: 100%;
    position: relative;
    span {
      position: absolute;
      color: white;
      bottom: 52px;
      margin: 0 30px 10% 30px;
      font-size: 16px;
    }
  }

  .login-right {
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 100%;
    .center();
    h2 {
      color: #bfbfbf;
    }
    h1 {
      margin: 0 0 36px 0;
      font-size: 52px;
    }
    .login-form-item {
      display: flex;
      justify-content: center;
    }

    .login-container {
      width: 40%;
    }
  }
}
</style>